<!--
 * @Description: 数据库信息及表单
 * @Version: 0.1
 * @Autor: Civet
 * @Date: 2019-10-14 20:21:15
<<<<<<< HEAD
 * @LastEditors: Civet
 * @LastEditTime: 2019-11-07 14:56:57
=======
 * @LastEditors: Civet
 * @LastEditTime: 2019-10-19 16:08:37
>>>>>>> c24183184c4eeb094687c42f97f85a7c64fd32c7
 -->
<template>
  <div class="ct_inforcollect">
    <!-- 基本信息 -->
    <div class="ct_top">
      <div class="ct_title">
        基本信息
        <el-button class="btn" type="primary" @click="baseInfoEdit">编辑</el-button>
      </div>
      <div class="ct_top_body">
        <el-scrollbar :native="false" tag="section" class="el-scroll">
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">名称：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.db_name"
                  :title="infoCollectData.db_name"
                  disabled
                ></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">数据抽取方式：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.dataExtractionMethodName"
                  :title="infoCollectData.dataExtractionMethodName"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">数据库类型：</div>
              <div class="ct_text_context">
                <el-input v-model="infoCollectData.dbType" :title="infoCollectData.dbType" disabled></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">来源路径：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.source_path"
                  :title="infoCollectData.source_path"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">数据库版本：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.dbVersion"
                  :title="infoCollectData.dbVersion"
                  disabled
                ></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">存储路径：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.storage_path"
                  :title="infoCollectData.storage_path"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">驱动：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.dbDrive"
                  :title="infoCollectData.dbDrive"
                  disabled
                ></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">密级：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.secretLevelName"
                  :title="infoCollectData.secretLevelName"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">数据访问URL：</div>
              <div class="ct_text_context">
                <el-input v-model="infoCollectData.db_url" :title="infoCollectData.db_url" disabled></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">所属系统：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.sysName"
                  :title="infoCollectData.sysName"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">用户名：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.user_name"
                  :title="infoCollectData.user_name"
                  disabled
                ></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">描述：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.description"
                  :title="infoCollectData.description"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
          <div class="ct_row">
            <div class="ct_row_left">
              <div class="ct_text_label">密码：</div>
              <div class="ct_text_context">
                <el-input v-model="infoCollectData.db_pwd" :title="infoCollectData.db_pwd" disabled></el-input>
              </div>
            </div>
            <div class="ct_row_right">
              <div class="ct_text_label">标签：</div>
              <div class="ct_text_context">
                <el-input
                  v-model="infoCollectData.labelName"
                  :title="infoCollectData.labelName"
                  disabled
                ></el-input>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <!-- 采集统计 -->
    <div class="ct_botton">
      <div class="ct_title">采集统计</div>
      <div class="ct_table">
        <el-scrollbar :native="false" tag="section" class="el-scroll">
          <el-table
            :data="infotableData"
            v-loading="infoLoading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(21, 29, 54, 0.8)"
            border
            highlight-current-row
          >
            <el-table-column align="center" :show-overflow-tooltip="true" prop="name" label="类型"></el-table-column>
            <el-table-column
              align="center"
              :show-overflow-tooltip="true"
              prop="ListSize"
              label="数量"
            ></el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog
      title="基本信息编辑"
      top="6vh"
      width="60%"
      :visible="baseInfoDialog"
      :close-on-click-modal="false"
      @close="baseInfoClose"
    >
      <el-form
        label-width="100px"
        status-icon
        :model="editInfoForm"
        ref="editInfoForm"
        class="demo-ruleForm"
      >
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="editInfoForm.name" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据抽取方式" prop="name">
              <el-select v-model="editInfoForm.dataExtractionMethod">
                <el-option
                  :label="item.dictName"
                  v-for="item in ExtractionMethodData"
                  :key="item.dictId"
                  :value="item.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据库类型" prop="name">
              <el-select v-model="editInfoForm.dbType" @change="baseSearchDbVersion">
                <el-option
                  :label="item.dictName"
                  v-for="item in DatabaseTypeData "
                  :key="item.dictId"
                  :value="item.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源路径" prop="name">
              <el-input v-model="editInfoForm.sourcePath" placeholder="来源路径"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据库版本" prop="name">
              <el-select v-model="editInfoForm.dbVersion" @change="baseSearchDbDrive">
                <el-option
                  :label="item.dictName"
                  v-for="item in dbVersion "
                  :key="item.dictId"
                  :value="item.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存储路径" prop="name">
              <el-input v-model="editInfoForm.strogePath" placeholder="存储路径"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="驱动" prop="name">
              <el-select v-model="editInfoForm.dbDrive">
                <el-option
                  :label="item.dictName"
                  v-for="item in driveData"
                  :key="item.dictId"
                  :value="item.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密级" prop="name">
              <el-select v-model="editInfoForm.secretLevel">
                <el-option
                  :label="item.dictName"
                  v-for="item in exchangeSystemData"
                  :key="item.dictId"
                  :value="item.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据访问URL" prop="name">
              <el-input v-model="editInfoForm.dbUrl" placeholder="数据访问URL"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属系统" prop="name">
              <el-select v-model="editInfoForm.systemId">
                <el-option
                  :label="item.system_name"
                  v-for="item in findAllSysData"
                  :key="item.system_id"
                  :value="item.system_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="editInfoForm.username" placeholder="用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="name">
              <el-input type="textarea" placeholder="请输入内容" v-model="editInfoForm.description"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="密码" prop="name">
              <el-input v-model="editInfoForm.dbPwd"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签" prop="name">
              <treeselect
                :multiple="true"
                :options="infoOptions"
                :flat="true"
                :default-expand-level="1"
                :normalizer="_normalizer"
                placeholder="选择标签"
                noOptionsText="暂无数据"
                noResultsText="没有找到匹配结果"
                noChildrenText="没有子节点"
                v-model="editInfoForm.label"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="baseInfoCancel">取消</el-button>
        <el-button type="warning" @click="baseInfoKeep">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入树选择器组件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {
    Treeselect
  },
  name: "InforCollect",
  watch: {},
  props: {
    components: {
      Treeselect
    },
    infoLoading: {
      type: Boolean,
      default: false
    },
    baseInfoDialog: {
      type: Boolean,
      default: false
    },
    infotableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    editInfoForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    infoCollectData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 下拉
    ExtractionMethodData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    DatabaseTypeData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dbVersion: {
      type: Array,
      default: () => {
        return [];
      }
    },
    driveData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    exchangeSystemData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    findAllSysData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    infoOptions: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  filters: {
    formatLabel(val) {
      let newVal = val || "";
      return newVal.substring(0, newVal.length - 1);
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * @description: 树配置
     * @param {object} node 树节点
     * @return:
     * @author: Civet
     */
    _normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.child
      };
    },
    // 编辑
    baseInfoEdit() {
      this.$emit("baseInfoEdit");
    },
    // 关闭弹窗
    baseInfoClose() {
      this.$emit("baseInfoClose");
    },
    // 取消弹窗
    baseInfoCancel() {
      this.$emit("baseInfoCancel");
    },
    // 保存弹窗
    baseInfoKeep() {
      this.$emit("baseInfoKeep");
    },
    // 数据库类型联动数据库版本
    baseSearchDbVersion(val) {
      this.$emit("baseSearchDbVersion", val);
    },
    // 数据库版本联动数据库驱动
    baseSearchDbDrive(val) {
      this.$emit("baseSearchDbDrive", val);
    }
  },
  destroyed() {}
};
</script>

<style scoped lang="less">
.ct_inforcollect {
  width: 100%;
  height: 100%;

  .ct_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.3rem;
    padding: 0.1rem 0;
    line-height: 0.3rem;
    font-size: 0.16rem;
    font-weight: 600;
    text-indent: 1em;
    background-color: #eee;

    .btn {
      margin-right: 0.1rem;
    }
  }

  .ct_top {
    width: 100%;
    height: 60%;

    .ct_top_body {
      width: 100%;
      height: calc(~"100% - 0.5rem");

      .ct_row {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        font-size: 0.16rem;
        margin: 0.3rem 0;

        .ct_row_left {
          .flex();
          align-items: center;
          width: 50%;
        }

        .ct_row_right {
          .flex();
          align-items: center;
          width: 50%;
        }

        .ct_text_label {
          width: 30%;
          text-align: right;
          font-weight: 700;
        }

        .ct_text_context {
          width: 50%;
          word-wrap: break-word;
        }
      }
    }
  }

  .ct_botton {
    width: 100%;
    height: 40%;

    .ct_table {
      width: 100%;
      height: calc(~"100% - 0.5rem");
    }
  }
}
</style>
